<script lang="ts" setup>
import { computed } from "vue";
import { useStore } from "@/store";

const store = useStore();
const pageNumber = computed(() => store.state.pageNumber);
const pageSize = computed(() => store.state.pageSize);
const total = computed(() => store.state.total);

const emit = defineEmits<{
  (e: "changePage", pageNo: number): void;
}>();

function changePage(pageNo: number) {
  console.log("子组件", pageNo);
  emit("changePage", pageNo);
}
</script>

<template>
  <el-pagination
    background
    :total="total"
    :page-size="pageSize"
    :page-sizes="[10, 25, 50, 100]"
    layout="prev, pager, next,"
    prev-text="<<"
    next-text=">>"
    @current-change="changePage"
    @size-change="changePage"
  />
</template>

<style scoped>
</style>